<template>
  <div class="mine-content c-w100 c-minh360 c-bg-sgray">
    <!-- 头部信息 -->
    <div class="c-pv40 c-ph24 bgImg c-bg-sgray c-minh100vh">

      <div class="c-flex-row c-aligni-center">
        <div class="c-mr20" @click="clickAvatar">
          <img class="c-ww100 c-hh100 c-brp50" :src='headimgurl ? headimgurl : require("@/assets/defult_head.png")' />
        </div>
        <div class="c-flex-column">
          <div class="c-pt20 c-text-ellipsis1 c-ww400 c-fw-b c-fs32 c-lh c-fw-b" >{{nickname}}</div>
          <div class="c-pt20 c-flex-row">
            <div class="c-fs24 c-fc-sblack c-pt4" >
              <span class="c-fc-sblack">ID: {{ userId }}</span>
              <span @click="copyUserId" class="iconfont c-fs32 c-pl10 c-vcAlign-top">&#xe805;</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 我的钱包 -->
      <div class="walletBg c-br20 c-mt40">
        <div class="c-flex-row  c-aligni-center c-justify-sb c-ph24 c-pv28 " @click="clickScholarship">
          <div class="c-fc-white">
            <span class="c-fs24 ">我的钱包(元)</span>
            <div class="c-fs36 c-fw-b c-lh50 c-pt4">
              {{accountBalance(modeleMapInfo.balance)}}
            </div>
          </div>
          <div class="c-flex-row">
            <span class="c-fc-lblue c-bg-white c-br32 c-fs26 c-fw-b c-ph34 c-pv14">查看</span>
          </div>
        </div>
      </div>

      <!-- 学习工具 -->
      <div class="c-ph28 c-mt24 c-bg-white c-br20">
        <div class="c-flex-row c-justify-sb c-aligni-center c-pv38" @click="goDetail(1)">
          <div class="c-flex-row" >
            <img class="c-ww40 c-hh40 c-mr26" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/fashou/yueke.png" alt="">
            <span class="c-fs26">我的约课</span>
          </div>
          <i class="iconfont c-fs26 c-fc-gray">&#xe635;</i>
        </div>

        <div class="c-flex-row c-justify-sb c-aligni-center c-pv38" @click="goDetail(2)">
          <div class="c-flex-row" >
            <img class="c-ww40 c-hh40 c-mr26" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/fashou/tuiguang.png" alt="">
            <span class="c-fs26">推广中心</span>
          </div>
          <i class="iconfont  c-fs26 c-fc-gray"> &#xe635;</i>
        </div>
      </div>
    </div>

    <bottom-menu :itemIndex="1"></bottom-menu>
  </div>
</template>

<script>

import { memberIndexMixin } from "@/mixin/memberIndex.js";
import bottomMenu from "@/components/templates/fashou/bottomMenu.vue";
import { utilJs } from "@/utils/common";

export default {
  name: 'personalCenter',
  mixins: [memberIndexMixin],
  components: {
    bottomMenu
  },
  data () {
    return {
      nickname: localStorage.getItem("userName") || '昵称',
      headimgurl: localStorage.getItem("userHeadImg"),
      userId: localStorage.getItem("userId") || '--',
      modeleMapInfo: {}
    }
  },
  created() {
    this.mx_getMemberIndexModuleInfo();
    setDocumentTitle('个人中心');
  },
  methods:{
    copyUserId() {
      if (!this.userId)
        return;
      utilJs.copyText(this.userId);
    },
    goDetail(type) {
      //1约课，2 推广中心
      // '/homePage/agent/chainInfo?name=' + cItem.name + '&fromType=promoter';
      let toPath = type == 1 ? '/member/myReservation/reservationClassList' : '/homePage/agent/chainInfo?name=' + '推广员1' + '&fromType=promoter';
      this.iosAppRouteChange(toPath);
    }
  }
}
</script>
